<html>
    <head>
        <meta charset="utf-8">
        <title>要素样式</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>

        <!-- 1.添加L.WFS的引用 -->
        <script type="text/javascript" src="../lib/plugins/Leaflet-WFST.src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                map = L.map("mapDiv", { 
                    //crs: L.CRS.EPSG4326,     //将默认crs改为WGS84
                    center: [0,0],
                    zoom: 2,
                });

                L.tileLayer( 
                    'http://{s}.tile.osm.org/{z}/{x}/{y}.png'
                ).addTo(map);


                // 2. 定义WFS服务参数对象
                const options = {
                      crs           : L.CRS.EPSG4326,       //数据的坐标系     
                      showExisting  : true,                 //显示存在的
                      geometryField : 'shape',              //几何字段名称
                      url           : '/geoserver/wfs',     //wfs服务地址
                      typeNS        : 'radi',               //wfs服务命名空间
                      typeName      : 'cities',           //wfs图层名称
                      //以下内容为要素显示的参数
                      opacity       : 1,                    //显示的透明度
                      style         : function(layer) {     //显示的样式
                                        return {
                                          color: 'black',
                                          weight: 1
                                        }
                                    },
                    };

                //2.创建L.WFS图层,并添加到地图上
                //  L.WFS图层包含两个参数，
                //      1) options: WFS的参数
                //      2) readFormat: feature的编码格式，本例中使用GeoJSON格式
                const wfstPoint = new L.WFST(options,                 //WFS参数
                                             new L.Format.GeoJSON({     //WFS的返回值为GeoJSON格式
                                                crs: L.CRS.EPSG4326,    //返回值的坐标系
                                                pointToLayer(geoJsonPoint, latlng) {
                                                    const layer = new L.CircleMarker(latlng, {
                                                                                     radius: 10,
                                                                                });
                                                    return layer;
                                                },
                                            })).addTo(map);

            }
                
        </script>
            
    </head>
    <body onload="init()">
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



